import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Icon, Tooltip } from 'antd';
import { Popconfirm, Modal, message } from 'antd';
import SearchList from './SearchList/SearchList';
import { CommonTable } from 'components';
import { axios, orderStatus } from 'utils';
import { userInfoMangeAction } from './index';
import moment from 'moment';
import styles from './UserInfoManage.less';
import BlackModal from './BlackModal/BlackModal';
import InfoModal from './InfoModal/InfoModal';

const convertParams = (obj = {}) => {
    const { time = [], status = '', nameTrue = '', phoneNo = '' } = obj;
    const isArr = Array.isArray(time) && time.length > 0;
    return {
        yStartTime: isArr ? time[0].format('YYYY-MM-DD 00:00:00') : '',
        yEndTime: isArr ? time[1].format('YYYY-MM-DD 23:59:59') : '',
        status,
        nameTrue,
        phoneNo
    }
}


class UserInfoManage extends Component {


    constructor(props) {
        super(props);
        this.searchStatus = convertParams({});
        this.state = {
            info: {}
        };
        const _this = this;
        this.pageSize = 10;
        this.operatorId = '';
        this.detailId = '';
        this.columns = [
            {
                title: '手机号码',
                dataIndex: 'phoneNo',
                key: 'phoneNo'
            },
            {
                title: '注册时间',
                dataIndex: 'addTime',
                key: 'addTime',
                render(text) {
                    return moment(Number(text) * 1000).format('YYYY-MM-DD: HH:mm:ss')
                }
            },
            {
                title: '渠道id',
                dataIndex: 'channelId',
                key: 'channelId'
            },
            {
                title: '姓名',
                dataIndex: 'nameTrue',
                key: 'nameTrue'
            },
            {
                title: '黑名单状态',
                dataIndex: 'isBlack',
                key: 'isBlack',
                render(text) {
                    return Number(text) === 0 ? "正常" : "黑名单";
                }
            },
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                render(text, record){
                    const { isBlack } = record;
                    // if(Number(isBlack) !== 0) {
                    //     return '';
                    // }
                    return (
                        <div className={styles.recordWrapper}>
                            {
                                Number(isBlack) === 0 && <Tooltip title={"添加黑名单"}>
                                    <span onClick={() => _this.showModal(text)}><Icon type={'delete'}/></span>
                                </Tooltip>
                            }

                            <Tooltip title={"查看详情"}>
                                <span onClick={() => _this.lookDetail(text)}><Icon type={'file-text'}/></span>
                            </Tooltip>
                            
                            <Popconfirm  title={"确认重置银行卡吗？"} okText="确认" cancelText="取消" onConfirm={() => _this.resetCard(text)} onCancel={_this.rescancel}>
                                <span><Icon type={'sync'}/></span>
                            </Popconfirm >

                        </div>
                    );
                }
            }
        ];
    }


    showModal = (text) => {
        const { changeModalVisible } = this.props;
        changeModalVisible(true);
        //存储当前记录的id
        this.operatorId = text;
    }
    handleOk = (obj) => {
        const { goBlackOperator, getTableData, tableData: { pagination } } = this.props;
        goBlackOperator({ ...obj, userId: this.operatorId}, () => {
            getTableData({ pageSize: this.pageSize, pageNum: pagination['current'] || 1, ...this.searchStatus });
        })

    }
    handleCancel = () => {
        const { changeModalVisible } = this.props;
        changeModalVisible(false);
    }
    componentDidMount() {
        const { getTableData } = this.props;
        getTableData({ pageSize: this.pageSize, pageNum: 1, ...this.searchStatus });
    }

    componentWillUnmount() {
        const { setTableData } = this.props;
        setTableData({
            data: [],
            pagination: {}
        })
    }

    handleSubmit = (obj) => {
        const { getTableData } = this.props;
        this.searchStatus = convertParams(obj);
        getTableData({pageNum: 1, pageSize: this.pageSize, ...this.searchStatus});
    }

    handlePageChange = (info) => {
        const {current, pageSize} = info;
        const {getTableData} = this.props;
        getTableData({pageNum: current, pageSize, ...this.searchStatus});
    }

    tabChange = (key) => {
        const { getApplyData, getOperatorData, getContactsData } = this.props;
        const params = { userId:  this.detailId, pageSize: 10000, pageNum: 1 };
        switch (Number(key)) {
            case 2:
                getApplyData(params);
                break;
            case 3:
                getContactsData(params);
                break;
            case 4:
                getOperatorData(params);
                break;
        }
    }

    handleInfoModalCancel = () => {
        const { changeDetailModal, setDetailData, setApplyData, setOperatorData, setContactsData } = this.props;
        this.detailId = '';
        changeDetailModal(false);
        //清空tab数据
        setDetailData({})
        setApplyData([]);
        setOperatorData([]);
        setContactsData([]);

    }
    lookDetail = (text) => {
        const { changeDetailModal, getDetailData } = this.props;
        this.detailId = text;
        getDetailData({ userId: text });
        changeDetailModal(true);
    }

    rescancel = () => {
        message.info('已取消');
    }
    // 重置银行卡
    resetCard = (text) => {
        const data = {userId: text};
        axios({
            url: '/hs/admin/order/resetUserBankStatus',
            method: 'post',
            data: data
        }).then((res) => {
            if(res.code === 200){
                Modal.success({
                    title: '重置成功',
                });
            }
            // else{
            //     Modal.warning({
            //         title: res.message,
            //     });
            //     // message.info('重置失败');
            // }
        })
    }

    render() {
        const { tableData: { data, pagination }, loading, visible, infoVisible, info, modalLoading } = this.props;
        return (
            <div>
                <SearchList submit={this.handleSubmit}/>
                <CommonTable
                    loading={loading}
                    handlePageChange={this.handlePageChange}
                    dataSource={data}
                    pagination={pagination}
                    columns={this.columns}
                />
                <BlackModal visible={visible} info={this.state.info} handleCancel={this.handleCancel} handleOk={this.handleOk}/>
                <InfoModal loading={modalLoading} handleChange={this.tabChange} info={info} visible={infoVisible} handleCancel={this.handleInfoModalCancel}/>
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    const { userManageState: { userInfoManageState } } = state;
    return {
        tableData: userInfoManageState['data'],
        loading: userInfoManageState['loading'],
        visible: userInfoManageState['visible'],
        infoVisible: userInfoManageState['infoVisible'],
        info: userInfoManageState['info'],
        modalLoading: userInfoManageState['modalLoading']

    }
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: userInfoMangeAction.uimGetTableData,
        setTableData: userInfoMangeAction.uimSetTableData,
        goBlackOperator: userInfoMangeAction.uimGoBlackList,
        changeModalVisible: userInfoMangeAction.uimChangeVisible,
        changeDetailModal: userInfoMangeAction.uimDetailVisible,
        getDetailData:userInfoMangeAction.uimGetDetailData,
        getApplyData: userInfoMangeAction.uimGetApplyData,
        getOperatorData: userInfoMangeAction.uimGetOperatorData,
        getContactsData: userInfoMangeAction.uimGetContactsData,
        setDetailData: userInfoMangeAction.uimSetDetailData,
        setApplyData: userInfoMangeAction.uimSetApplyData,
        setOperatorData: userInfoMangeAction.uimSetOperatorData,
        setContactsData: userInfoMangeAction.uimSetContactsData
    },dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(UserInfoManage);